<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="24"><h3>选择上传文件</h3></el-col>
        <el-col :span="24" class="file-uploading">⽀持⽂件类型:JPG,PNG,GIF,SVG 最⼤体积:500MB</el-col>
      </el-row>
      <el-upload
          class="upload-demo"
          :headers="headers"
          drag
          :action="updateAction"
          :on-success="uploadPdf"
          :on-preview="handlePreview"
          :file-list="pic"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>

      <el-row>
        <el-col :span="24"><h3>作品名称</h3></el-col>
        <el-col :span="24"><el-input v-model="form.name" blur="true" placeholder="请输⼊作品名称"></el-input></el-col>
      </el-row>

      <el-row>
        <el-col :span="24"><h3>作品介绍</h3></el-col>
        <el-input
          v-model="form.content"
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 4}"
          placeholder="编辑此作品的介绍">
        </el-input>
      </el-row>

     <el-button type="primary" @click="onSubmit" class="el-submit">创建作品</el-button>
    </el-form>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import Config from "@/utils/config";
import { addWork } from '@/api/work'
export default {
data(){
  return{
    form:{
      content: '',
      name: '',
      cover: ''
    },
    updateAction:Config.updateImgAction,
    headers: {token: getToken('Token') },
    pic: []
}
},
methods:{
  onSubmit(){
    addWork(this.form).then((res)=>{
      // console.log(res);
      if(res.status == 200){
        this.$message.success('提交审核成功')
        this.$router.push('/work');
      }else{
        this.$message.error('提交审核失败')
      }
    })
  },

  uploadPdf(res,file) {
    // console.log(res,file);
    if(res.status == 200){
      this.form.cover = res.data;
    }
  },
  handlePreview(file){
      window.location.href = file.url
    },
}
}
</script>

<style scoped lang="less">
.file-uploading{
  color: grey;
}
.put-img{
  margin-top: 10px;
}
.el-submit{
    margin: 30px 0 0 380px;
    width: 30%;
  }
</style>